<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.4.1.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="divtest">
        <div class="title">
            <span class="fl">检测数字的奇偶性</span>
            <span class="fr">
                        <input id="btnCheck" type="button" value="检测" />
                    </span>
        </div>
        <ul>
            <li>请求输入一个数字
                <input id="txtNumber" type="text" size="12" />
            </li>
        </ul>
    </div>
</body>
<script>
  $("#btnCheck").on("click",function () {
        $.ajax({
            url:"https://www.imooc.com/data/check.php",
            data:{num:$("#txtNumber").val()},
            type: 'POST',
            success:function (data) {
                $("ul").append("<li>你输入的<b>  "
                    + $("#txtNumber").val() + " </b>是<b> "
                    + data + " </b></li>");
            }
        })
  });
  //ajaxStart()和ajaxStop()方法是绑定Ajax事件.
  //ajaxStart()方法用于在Ajax请求发出前触发函数.
  //ajaxStop()方法用于在Ajax请求完成后触发函数.
</script>
</html>